<template>
  <div>
    <div>
      <ul class="sideBar">
        <li  @mouseenter="enter(0)" @mouseleave="leave">
          <img src='@/assets/index_images/phone.png' alt="">
        </li>
        <li @click="enterQQ">
<!--          <img src='@/assets/index_images/QQ.png' alt="">-->
          <a target="_blank" :href="QQUrl"><img src='@/assets/index_images/QQ.png' alt=""></a>
        </li>
        <li  @mouseenter="enter(2)" @mouseleave="leave">
          <img src='@/assets/index_images/wechart.png' alt="" >
        </li>
        <li  @mouseenter="enter(3)" @mouseleave="leave" >
          <img src='@/assets/index_images/weibo.png' alt="">
        </li>

      </ul>
      <div class="showDiv" v-if="flag == 0">
        <div class="smallBox1">
          热线服务：<img src="../../../assets/index_images/smallPhone.png" width="30px" height="30px" alt="">
          <h3 style="font-size: 32px;color: yellow">{{ info.tel }}</h3>
          <p>客服咨询时间：{{ phoneInfo.time }}</p>
          投稿邮箱：
          <h3>{{ info.mail }}</h3>
        </div>

      </div>
<!--      <div class="showDiv" v-if="flag == 1">-->
<!--        <img src="../../../assets/index_images/QQImg.png" width="200" height="200;" alt="" class="codeImg">-->
<!--      </div>-->
      <div class="showDiv" v-if="flag == 2">
        <img :src="info.wechat" width="200" height="200;" alt="" class="codeImg">
      </div>
      <div class="showDiv" v-if="flag == 3">
        <img :src="info.weibo" width="200" height="200;" alt="" class="codeImg">
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "InfoBar",
  data(){
    return{
      QQ:'2227303572',
      QQUrl:'http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes',
      flag:null,
      phoneInfo:{tel:'17359119069',time:'8:00-18:00',email:"2227303572@qq.com"},
      QQinfo:{codeImg:'../../../assets/index_images/codeImg.png'},
      weixinInfo:{codeImg:'../../../assets/index_images/codeImg.png'},
      weiboInfo:{codeImg:'../../../assets/index_images/weiboImg.png'},
      sideBarList:[
          '@assets/index_images/QQ.png',
        '@assets/index_images/wechart.png',
        '@assets/index_images/weibo.png'
      ],
      info:{}
    }
  },
  methods:{
    enterQQ(){
      this.QQUrl = this.QQUrl.slice(0, 32) + this.info.qq + this.QQUrl.slice(32);
    },
    enter(i){
      this.flag = i

    },
    leave(){
      this.flag = null
    }
  },
  created() {
    this.getRequest('/p/ims/info').then((resp)=>{
      this.info = resp.data
    })

  }
}
</script>

<style scoped>
.sideBar{
  width: 43px;
  height: 222px;
  /*border:solid 1px lightgray;*/
  position: fixed;
  right: 0;
  top: 20em;
  z-index: 1000;
}
.showDiv{
  z-index: 1000;
  width: 266px;
  height: 222px;
  background-color: #242424;
  position: fixed;
  right: 3.5em;
  top: 20em;

  color: white;
  /*text-align: center;*/
}
/*.showDiv h3{*/
/*  margin-bottom: 1em;*/
/*  margin-top: 4px;*/
/*}*/
.showDiv img{
  margin-top: 1em;
  text-align: center;
}
.codeImg{
  margin-left: 40px;
}
.smallBox1{
  margin: 1em;
}
</style>